<template>
  <div class="absolute w-full h-full z-10 flex items-center justify-center">
    <el-card v-loading="loading" class="rounded-3xl">
      <template #header>
        <div class="text-center">
          <h2 class="text-xl font-bold">注册</h2>
        </div>
      </template>
      <div class="mt-4 w-[60rem] mx-auto">
        <el-steps :active="step" align-center>
          <el-step title="选择身份" />
          <el-step title="补充信息" />
          <el-step title="注册成功" />
        </el-steps>
      </div>
      <div>
        <template v-if="step === 1">
          <div class="py-12 min-h-[30rem]">
            <el-radio-group class="mb-2 w-full" v-model="userRole">
              <div class="w-full">
                <el-radio
                  class="radio-item w-full h-24 m-0 flex items-center justify-center rounded-xl border-dashed"
                  value="student"
                  size="large"
                  border
                >
                  <span class="text-lg font-bold">我是学生</span>
                </el-radio>
              </div>
              <div class="w-full mt-4">
                <el-radio
                  class="radio-item w-full h-24 m-0 flex items-center justify-center rounded-xl"
                  value="administrator"
                  size="large"
                  border
                >
                  <span class="text-lg font-bold">我是管理员</span>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </template>
        <template v-if="step === 2">
          <div v-if="userRole === 'student'" class="pt-12 min-h-[30rem]">
            <el-form
              ref="studentFormRef"
              :model="student"
              :rules="studentRules"
            >
              <div class="flex gap-4 mb-4">
                <div class="w-1/2">
                  <label class="text-sm font-bold">学号</label>
                  <el-form-item class="my-2" prop="sId">
                    <el-input
                      v-model="student.sId"
                      type="number"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="w-1/2">
                  <label class="text-sm font-bold">姓名</label>
                  <el-form-item class="my-2" prop="sName">
                    <el-input
                      v-model="student.sName"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="flex gap-4 mb-4">
                <div class="w-1/2">
                  <label class="text-sm font-bold">专业</label>
                  <el-form-item class="my-2" prop="sMajor">
                    <el-input
                      v-model="student.sMajor"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="w-1/2">
                  <label class="text-sm font-bold">班级</label>
                  <el-form-item class="my-2" prop="sClass">
                    <el-input
                      v-model="student.sClass"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="flex gap-4 mb-4">
                <div class="w-1/2">
                  <label class="text-sm font-bold">楼栋号</label>
                  <el-form-item class="my-2" prop="rNumber">
                    <el-input
                      v-model="student.rNumber"
                      type="number"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="w-1/2">
                  <label class="text-sm font-bold">宿舍号</label>
                  <el-form-item class="my-2" prop="dNumber">
                    <el-input
                      v-model="student.dNumber"
                      type="number"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="flex gap-4 mb-4">
                <div class="w-1/2">
                  <label class="text-sm font-bold">证件类型</label>
                  <el-form-item class="my-2" prop="sNumtype">
                    <el-select v-model="student.sNumtype" placeholder="请选择">
                      <el-option
                        v-for="item in sNumtypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="w-1/2">
                  <label class="text-sm font-bold">证件号码</label>
                  <el-form-item class="my-2" prop="sNumber">
                    <el-input
                      v-model="student.sNumber"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="flex gap-4 mb-4">
                <div class="w-1/2">
                  <label class="text-sm font-bold">性别</label>
                  <el-form-item class="my-2" prop="sSex">
                    <el-select v-model="student.sSex" placeholder="请选择">
                      <el-option
                        v-for="item in sSexOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="w-1/2">
                  <label class="text-sm font-bold">出生日期</label>
                  <el-form-item class="my-2" prop="sBirth">
                    <el-date-picker
                      class="w-full"
                      v-model="student.sBirth"
                      type="date"
                      placeholder="Pick a day"
                      :disabled-date="disabledDate"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="flex gap-4 mb-4">
                <div class="w-1/2">
                  <label class="text-sm font-bold">联系电话</label>
                  <el-form-item class="my-2" prop="sTel">
                    <el-input
                      v-model="student.sTel"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="w-1/2">
                  <label class="text-sm font-bold">联系地址</label>
                  <el-form-item class="my-2" prop="sAddress">
                    <el-input
                      v-model="student.sAddress"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="flex gap-4 mb-4">
                <div class="w-1/2">
                  <label class="text-sm font-bold">密码</label>
                  <el-form-item class="my-2" prop="sPassword">
                    <el-input
                      v-model="student.sPassword"
                      type="password"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="w-1/2">
                  <label class="text-sm font-bold">再次输入密码</label>
                  <el-form-item class="my-2" prop="sPassword2">
                    <el-input
                      v-model="student.sPassword2"
                      type="password"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
          <div v-if="userRole === 'administrator'" class="pt-12 min-h-[30rem]">
            <el-form
              ref="administratorFormRef"
              :model="administrator"
              :rules="administratorRules"
            >
              <div class="flex gap-4 mb-4">
                <div class="w-1/2">
                  <label class="text-sm font-bold">教职工号</label>
                  <el-form-item class="my-2" prop="id">
                    <el-input
                      v-model="administrator.id"
                      type="number"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="w-1/2">
                  <label class="text-sm font-bold">姓名</label>
                  <el-form-item class="my-2" prop="name">
                    <el-input
                      v-model="administrator.name"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="flex gap-4 mb-4">
                <div class="w-1/2">
                  <label class="text-sm font-bold">密码</label>
                  <el-form-item class="my-2" prop="password">
                    <el-input
                      v-model="administrator.password"
                      type="password"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="w-1/2">
                  <label class="text-sm font-bold">再次输入密码</label>
                  <el-form-item class="my-2" prop="password2">
                    <el-input
                      v-model="administrator.password2"
                      type="password"
                      clearable
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
        </template>
        <template v-if="step === 3">
          <el-result
            icon="success"
            title="注册成功"
            sub-title="恭喜你，你的账号已成功注册！"
          >
          </el-result>
        </template>
      </div>
      <template #footer>
        <div class="flex justify-between items-center w-full p-4">
          <div>
            <el-button
                type="primary"
                plain
                size="large"
                @click="backToLogin"
                v-if="step === 1"
            >回到登录</el-button
            >
            <el-button
              type="primary"
              plain
              size="large"
              @click="step--"
              v-if="step === 2"
              >上一步</el-button
            >
          </div>
          <div>
            <el-button
              type="primary"
              size="large"
              @click="step++"
              v-if="step === 1"
              >下一步</el-button
            >
            <el-button
              type="primary"
              size="large"
              @click="signup"
              v-if="step === 2"
              >申请注册</el-button
            >
            <el-button
              type="primary"
              size="large"
              @click="backToLogin"
              v-if="step === 3"
              >回到登录</el-button
            >
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>
<script setup>
// 引入Vue的响应式引用、路由钩子、Swal弹窗库等
import { ref } from "vue";
import { ApiBase } from "@/core/api/index.js";
import { useRouter } from "vue-router";
import Swal from "sweetalert2";
// 定义响应式变量，包括加载状态、路由引用、步骤、用户角色等
const loading = ref(false);
const router = useRouter();
const step = ref(1);
const userRole = ref("student");

const studentFormRef = ref();
const administratorFormRef = ref();
// 定义学生和管理员的表单模型以及表单验证规则
const student = ref({
  sId: "",
  rNumber: "",
  dNumber: "",
  sName: "",
  sPassword: "",
  sPassword2: "",
  sSex: "",
  sTel: "",
  sAddress: "",
  sNumber: "",
  sNumtype: "",
  sBirth: "",
  sClass: "",
  sMajor: "",
});

const administrator = ref({
  id: "",
  name: "",
  password: "",
  password2: "",
});

//表单验证。required：必填；message:未填时提醒；trigger:监听时机
const studentRules = {
  sId: [
    { required: true, message: "请输入学号", trigger: "change" },
    { min: 8, max: 8, message: "学号长度为8位", trigger: "change" },
  ],
  sName: [
    { required: true, message: "请输入姓名", trigger: "change" },
    { min: 2, max: 10, message: "姓名长度在2到10个字符", trigger: "change" },
  ],
  sMajor: [
    { required: true, message: "请输入专业", trigger: "change" },
    { min: 2, max: 10, message: "专业长度在2到10个字符", trigger: "change" },
  ],
  sClass: [
    { required: true, message: "请输入班级", trigger: "change" },
    { min: 1, max: 10, message: "班级长度在1到10个字符", trigger: "change" },
  ],
  rNumber: [
    { required: true, message: "请输入楼栋号", trigger: "change" },
    { min: 1, max: 10, message: "楼栋号长度在1到10个字符", trigger: "change" },
  ],
  dNumber: [
    { required: true, message: "请输入宿舍号", trigger: "change" },
    { min: 1, max: 10, message: "宿舍号长度在1到10个字符", trigger: "change" },
  ],
  sNumtype: [{ required: true, message: "请选择证件类型", trigger: "change" }],
  sNumber: [
    { required: true, message: "请输入证件号码", trigger: "change" },
    { min: 18, max: 18, message: "请输入正确的证件号码", trigger: "change" },
  ],
  sSex: [{ required: true, message: "请选择性别", trigger: "change" }],
  sBirth: [{ required: true, message: "请选择出生日期", trigger: "change" }],
  sTel: [
    { required: true, message: "请输入联系电话", trigger: "change" },
    { min: 11, max: 11, message: "请输入正确的联系电话", trigger: "change" },
  ],
  sAddress: [
    { required: true, message: "请输入联系地址", trigger: "change" },
    {
      min: 5,
      max: 50,
      message: "联系地址长度在5到50个字符",
      trigger: "change",
    },
  ],
  sPassword: [
    { required: true, message: "请输入密码", trigger: "change" },
    { min: 6, max: 16, message: "密码长度在6到16个字符", trigger: "change" },
  ],
  //自定义特殊规则，判断和第一次输入密码是否一致
  sPassword2: [
    {
      required: true,
      trigger: "change",
      asyncValidator: (rule, value) => {
        return new Promise((resolve, reject) => {
          if (value.toString().trim() === "") {
            reject("请再次输入密码");
          } else {
            if (value.toString() !== student.value.sPassword.toString()) {
              reject("两次输入密码不一致");
            } else {
              resolve();
            }
          }
        });
      },
    },
  ],
};
//管理员验证规则
const administratorRules = {
  id: [
    { required: true, message: "请输入教职工号", trigger: "change" },
    { min: 8, max: 8, message: "教职工号长度为8位", trigger: "change" },
  ],
  name: [
    { required: true, message: "请输入姓名", trigger: "change" },
    { min: 2, max: 10, message: "姓名长度在2到10个字符", trigger: "change" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "change" },
    { min: 6, max: 16, message: "密码长度在6到16个字符", trigger: "change" },
  ],
  password2: [
    {
      required: true,
      trigger: "change",
      asyncValidator: (rule, value) => {
        return new Promise((resolve, reject) => {
          if (value.toString().trim() === "") {
            reject("请再次输入密码");
          } else {
            if (value.toString() !== administrator.value.password.toString()) {
              reject("两次输入密码不一致");
            } else {
              resolve();
            }
          }
        });
      },
    },
  ],
};
// 定义证件类型和性别的选项
const sNumtypeOptions = [
  {
    value: "居民身份证",
    label: "居民身份证",
  },
  {
    value: "港澳台通行证",
    label: "港澳台通行证",
  },
];

const sSexOptions = [
  {
    value: "M",
    label: "男",
  },
  {
    value: "F",
    label: "女",
  },
];
// 定义禁用日期的函数，用于日期选择器
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
// 定义注册函数，根据用户选择的身份提交注册信息
const signup = async () => {
  if (userRole.value === "student") {
    if (!studentFormRef) return;
    studentFormRef.value.validate((valid) => {
      if (valid) {
        signupStudent();
      } else {
        Swal.fire({
          icon: "error",
          title: "表单验证失败",
          text: "请检查输入内容",
        });
      }
    });
  }
  if (userRole.value === "administrator") {
    if (!administratorFormRef) return;
    administratorFormRef.value.validate((valid) => {
      if (valid) {
        signupAdministrator();
      } else {
        Swal.fire({
          icon: "error",
          title: "表单验证失败",
          text: "请检查输入内容",
        });
      }
    });
  }
};

const signupStudent = async () => {
  loading.value = true;
  const response = await ApiBase.signupStudent({
    ...student.value,
  });
  if (response.code == 0) {
    step.value = 3;
  }
  loading.value = false;
};

const signupAdministrator = async () => {
  loading.value = true;
  const response = await ApiBase.signupAdministrator({
    ...administrator.value,
  });
  if (response.code == 0) {
    step.value = 3;
  }
  loading.value = false;
};
// 定义返回登录的函数
const backToLogin = () => {
  router.push("/");
};
</script>
<style scoped>
/* 定义选中时的radio样式 */
.radio-item.is-checked {
  background-color: rgba(64, 158, 255, 0.1);
}
</style>
